*{
    margin: 0;
    padding: 0;
    /* 设置的边框和内边距的值是包含在 width 内的 */
    box-sizing: border-box;
    /* 无文本装饰 */
    text-decoration: none;
}

html{
    font-size: 62.5%;
}

body{
    width: 100%;
    height: 100vh;
    background-color: rgba(191, 248, 226);
    display: grid;
    place-items: center;
}

.navbar{
    width: 90rem;
    height: 10rem;
    /* background-color: red; */
    display: flex;
    /* 主轴（横、行）的排列 */
    justify-content: center;
    /* 交叉轴（竖、列）排列 */
    align-items: center;
    box-shadow: 0.3rem 0.3rem 0.3rem #aaa;
    border-radius: 0.5rem;
}

.navbar-link{
    width: 10rem;
    height: 100%;
    background-color: rgba(222, 233, 181);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 1rem;
    /* 相对于自身偏移，不改变其他元素 */
    position: relative;
    /* 溢出的内容被裁剪 */
    overflow: hidden;
    transition: border-radius 0.2s;
}

.navbar-link:first-child{
    /* background-color: red; */
    /* 元素永远不会成为鼠标事件的target */
    pointer-events: none;
    border-radius: 0.5rem 0 0 0.5rem;
}

.navbar-link:last-child{
    pointer-events: none;
    border-radius: 0 0.5rem 0.5rem 0;
}

.change.navbar-link{
    background-color: rgb(185, 197, 147);
}

.navbar-link.prevElChange{
    border-top-right-radius: 1.3rem;
    /* 指定为一个或多个 CSS 属性的过渡效果 */
    transition: border-radius 0.45s;
}

.navbar-link.nextElChange{
    border-top-left-radius: 1.3rem;
    transition: border-radius 0.45s;
}

/* 在元素内容之前插入内容 */
.navbar-link::before{
    content: "";
    width: 10.4rem;
    height: 8rem;
    background-color: rgb(191, 248, 226);
    position: absolute;
    top: -100%;
    left: -0.2rem;
    border-radius: 0 0 5rem 5rem;
    transition: top 0.4s, background-color 0.4s;
}

.change.navbar-link::before{
    top: -30%;
    transition: top 0.2s;
}

.navbar-link i{
    font-size: 2.5rem;
    color: #333;
    transition: color 0.4s, font-size 0.4s;
}

.change.navbar-link i{
    font-size: 3.5rem;
    color: white;
}